  <template>
  <view class="membership_package">
    <z-nav-bar id="nav" bgColor="#ffffff" title="会员套餐"></z-nav-bar>
    <public-loading></public-loading>
    <view class="charge-title flex-center-between">
      <view class="cell">
        <text class="bold">充值会员</text>
      </view>
      <view>
        充值即享**折优惠<text class="red">*</text>
      </view>
    </view>
    <view class="charge-rectangle-pot">
      <view class="rectangle-item" v-for="item in list" :key="item.id" @click="onSelect(item.packageId)">
        <view class="txt">{{item.packageName}}</view>
        <view class="flex-center-between">
          <text>充值{{item.amount}}元</text>
          <single-select :selectShow="cardId === item.packageId" :unbgColor="'#fff'"></single-select>
        </view>
      </view>
    </view>
    <view class="bottom-btn-box" >
      <main-button isYGradient :color="'#613423'" @click="handlePayment">支付</main-button>
      <!-- <navigator url="/pagesOrder/payment?type=3">
      </navigator> -->
    </view>
  </view>
</template>

<script setup >
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import {memberList} from '@/api/pagesMy/user'
import {customerActivateMembership} from '@/api/pagesShop'
import {setPlay} from '../../utils/common'
const storeId = ref('')
const cardId = ref('')
const list =ref([])
const handlePayment =()=>{
  if(!cardId.value){
    uni.showToast({
      title:'请选择会员套餐',
      icon:'none'
    })
    return
  }
  customerActivateMembership({
    packageId:cardId.value,
    storeId:storeId.value
  }).then(res=>{
    setPlay(res,()=>{
      uni.showToast({
        title:'支付成功',
        icon:'none'
      })

    })
    // uni.navigateTo({
    //   url: '/pagesMy/user/pay'
    // })
  })
 }
 const onSelect =(id)=>{
   cardId.value=id
 }
onLoad((e)=>{
  if(e.storeId){
    storeId.value = e.storeId
    memberList({
      storeId: storeId.value
    }).then(res=>{
      console.log('www',res)
      list.value = res
    })
  }
})
</script>

<style lang="scss" scoped>
@import "../style/common.scss";
.membership_package{

}
.charge-rectangle-pot .rectangle-item{
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
</style>
